<template>
  <div class="user-profile">
    <div class="profile-header">
      <h2 class="profile-title">
        <el-icon><User /></el-icon>
        个人信息
      </h2>
    </div>

    <el-card class="profile-card" shadow="always">
      <div class="profile-content">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <div class="profile-item">
              <span class="item-label"><el-icon><User /></el-icon> 账户名：</span>
              <span class="item-value">{{ userInfo.account }}</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="profile-item">
              <span class="item-label"><el-icon><Edit /></el-icon> 用户名：</span>
              <span class="item-value">{{ userInfo.username }}</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="profile-item">
              <span class="item-label">
                <el-icon><Sunny /></el-icon> 性别：
              </span>
              <span class="item-value">{{ userInfo.gender }}</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="profile-item">
              <span class="item-label"><el-icon><Calendar /></el-icon> 年龄：</span>
              <span class="item-value">{{ userInfo.age }} 岁</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="profile-item">
              <span class="item-label"><el-icon><Star /></el-icon> 会员等级：</span>
              <el-tag :type="getVipTagType(userInfo.title)" effect="light" size="large">
                {{ userInfo.title }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElLoading, ElIcon } from 'element-plus';
import {
  User,
  Edit,
  Calendar,
  Star,
} from '@element-plus/icons-vue';

// 用户信息
const userInfo = ref({
  account: '',
  username: '',
  gender: '',
  age: '',
  title: ''
});

// 获取VIP标签样式
const getVipTagType = (title) => {
  switch(title) {
    case '正式会员': return 'warning';
    case '高级会员': return 'danger';
    default: return 'success';
  }
};

// 获取用户信息
const fetchUserInfo = async () => {
  const uid = localStorage.getItem('uid');
  if (!uid || uid === 'undefined') {
    ElMessage.error('未登录，请先登录');
    return;
  }
  const loading = ElLoading.service({ fullscreen: true, text: '加载中...' });
  try {
    const response = await axios.get(`http://localhost:8080/v1/user/details/${uid}`);
    console.log('Response data:', response.data);

    const userData = response.data.data;
    userData.gender = userData.gender == 'M' ? '男' : '女';
    userInfo.value = userData;
  } catch (error) {
    console.error('用户错误信息:', error);
    ElMessage.error('获取用户信息失败');
  } finally {
    loading.close();
  }
};

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
.user-profile {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
  min-height: 100vh;
}

.profile-header {
  margin-bottom: 24px;
  text-align: center;
}

.profile-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.profile-content {
  padding: 24px;
}

.profile-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.profile-item:hover {
  background-color: #f0f7ff;
  transform: translateX(5px);
}

.item-label {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-value {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.el-tag {
  font-size: 16px;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .profile-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .item-label {
    margin-bottom: 8px;
  }
}
</style>
